<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .cont{position: relative;}
        .box{padding: 5px;float: left;}
        .box h4{width: 212px;background: #eee;margin:0;padding: 6px 0;}
        .imgbox{border:solid 1px #aaa;border-radius: 5px;padding:5px;background: #eee;}
        .imgbox img{width:200px;}
    </style>
</head>
<body>
    <div class="cont">
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div><div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div><div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div><div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div><div class="box">
            <div class="imgbox">
                <img src="./imgs/2.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/4.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/5.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/3.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/1.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/6.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/7.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/8.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/9.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
        <div class="box">
            <div class="imgbox">
                <img src="./imgs/10.jpg" alt="">
            </div>
            <h4>这是一张什么什么图片的描述</h4>
        </div>
    </div>
</body>
<script>

    function Waterfall(){
        // 获取元素
        this.boxs = document.querySelectorAll(".box");
        // 计算单行最大个数：向下取整(浏览器宽 / 元素宽)
        this.clientW = document.documentElement.clientWidth;
        this.maxNum = parseInt(this.clientW / this.boxs[0].offsetWidth);
        // 第一行
        this.firstLine()
        // 其他行
        this.otherLine()
    }
    Waterfall.prototype = {
        firstLine(){
            this.heightArr = [];
            // 遍历元素
            for(let i=0;i<this.maxNum;i++){
                // 获取所有高度，作为初始列高
                this.heightArr.push(this.boxs[i].offsetHeight);
            }
        },
        otherLine(){
            // 遍历元素，设置定位
            for(let i=this.maxNum;i<this.boxs.length;i++){
                this.boxs[i].style.position = "absolute";
                // 获取最小列高，设置给当元素的top
                // Math.min.apply(null, this.heightArr);
                // this.heightArr.slice(0).sort((a,b)=>a-b)[0];
                // this.heightArr.map(val=>val).sort((a,b)=>a-b)[0];
                // this.heightArr.filter(val=>true).sort((a,b)=>a-b)[0];
                // Array.from(this.heightArr).sort((a,b)=>a-b)[0];
                const min = Math.min(...this.heightArr);
                // console.log(min);
                this.boxs[i].style.top = min + "px";
                // 获取最小列高的索引，计算left，设置当前元素的left
                const minIndex = this.heightArr.indexOf(min);
                this.boxs[i].style.left = minIndex * this.boxs[i].offsetWidth + "px";
                // 修改当前最小列高为：最小列高+当前元素的高度
                this.heightArr[minIndex] += this.boxs[i].offsetHeight;
            }
        }
    }

    // 浏览器加载完成后，才能获取到图片的尺寸
    onload = function(){
        new Waterfall();
    }

</script>
</html>